<template>
  <div class="page">
    <!-- 导航 开始 -->
    <nav-bar title="用户评论"></nav-bar>
    <!-- 导航 end -->

    <!-- 总体 开始 -->
    <div class="total_box">
      <div class="left">
        <div class="score">{{ $fomartRate(totalScore.scoreOverall) }}</div>
        <div class="">
          <div class="top">
            <span>{{ showRateText(totalScore.scoreOverall) }}</span>
            <span class="lili_divider"></span>
            <span>{{ commentsList.length }}条</span>
          </div>
          <div class="bottom">高于88%的口腔机构</div>
        </div>
      </div>
      <div class="right">
        <div class="cell">
          <span>专业</span>
          <span>{{ $fomartRate(totalScore.scoreProfessional) }}</span>
          <span class="line">
            <i
              :style="'width:' + getLeft(totalScore.scoreProfessional) + '%'"
            ></i>
          </span>
        </div>
        <div class="cell">
          <span>服务</span>
          <span>{{ $fomartRate(totalScore.scoreService) }}</span>
          <span class="line">
            <i :style="'width:' + getLeft(totalScore.scoreService) + '%'"></i>
          </span>
        </div>
        <div class="cell">
          <span>环境</span>
          <span>{{ $fomartRate(totalScore.scoreSurroundings) }}</span>
          <span class="line">
            <i
              :style="'width:' + getLeft(totalScore.scoreSurroundings) + '%'"
            ></i>
          </span>
        </div>
      </div>
    </div>
    <!-- 总体 end -->

    <!-- 评论列表 开始 -->
    <div class="case_list">
      <template v-if="commentsList && commentsList.length">
        <UserEvaluate
          v-for="(item, index) in commentsList"
          :key="index"
          :info="item"
        ></UserEvaluate>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 评论列表 end -->
  </div>
</template>
  <script>
import UserEvaluate from "@/components/evaluate/index.vue";
import {
  GET_HOSPITAL_USERCOMMENTS,
  GET_DOCTOR_USERCOMMENTS,
} from "@/http/interface";
import { showRateText } from "@/utils/utils";
export default {
  components: {
    UserEvaluate,
  },
  data() {
    return {
      id: "",
      commentsList: [],
      totalScore: {},
      showRateText: (str) => {
        return showRateText(str);
      },
    };
  },
  head() {
    return {
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/hospital/evaluate/${this.id}`,
        },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let _source = query.source || "hosp";
    let _params = { id: params.id };
    let _path = GET_HOSPITAL_USERCOMMENTS;
    if (_source == "doctor") {
      _path = GET_DOCTOR_USERCOMMENTS;
    }

    // 用户评价
    let comes = await $axios.get(_path, { params, _params });
    let obj = comes.data || {};
    let commentsList = obj.list || [];
    let totalScore = obj.summary || {};
    return {
      id: params.id,
      commentsList,
      totalScore,
    };
  },
  methods: {
    // 获取占比
    getLeft(num) {
      let m = 5;
      let n = ((Number(num) / m) * 100).toFixed(0);
      console.log(n);
      return n;
    },
  },
};
</script>
  <style lang="less" scoped>
@import "/assets/styles/hospital/evaluate.less";
</style>